<template>
    <div class="theme-setting">
        <!-- 主题色设置 -->
        <div class="info-container">
            <h3>主题色设置</h3>
            <div class="info-box">
                <el-row :gutter="20">
                    <el-col :span="8" v-for="item in themeColorList" :key="item.id">
                        <el-card :class="{'active': item.themeColor === themeColor}" @click="changeTheme(item.themeColor)">
                            <div class="color-box" :style="`background-color:${item.subColor2}`">
                                <div class="header" :style="`background-color:${item.themeColor}`"></div>
                                <div class="line" :class="`line-${i}`" v-for=" i in 3" :style="`background-color:${item.subColor1}`" :key="i"></div>
                                <div class="line-box">
                                    <div class="line" :class="`line-${i}`" v-for=" i in 3" :style="`background-color:${item.subColor1}`" :key="i"></div>
                                </div>
                            </div>
                            <p>{{item.theme}}</p>
                            <span>{{item.description}}</span>
                        </el-card>
                    </el-col>
                </el-row>
                <h4>自定义颜色</h4>
                <div class="theme-box">
                    <div class="theme-color-block">
                        <el-color-picker v-model="themeColor" @change="changeTheme"/>
                    </div>
                    <el-button type="primary" @click="recoverDefault" style="margin-left:10px">恢复默认</el-button>
                </div>
            </div>
        </div>
        <!-- 页面风格设置 -->
    </div>
</template>
<script setup>
import { ref } from 'vue'
// import { editTheme } from '@/utils/theme'
// document.documentElement 是全局变量时
const themeColorList = ref([
    {id:1,theme:"蓝色主题",description:"专业、可信赖",themeColor:"#409eff",subColor1:"rgb(121.3, 187.1, 255)",subColor2:"rgb(197.7, 225.9, 255)"},
    {id:2,theme:"绿色主题",description:"健康、自然",themeColor:"#22c55e",subColor1:"rgb(34 197 94 / 0.6)",subColor2:"rgb(34 197 94 / 0.2)"},
    {id:3,theme:"红色主题",description:"热情、活力",themeColor:"#ef4444",subColor1:"rgb(239 68 68 / 0.6)",subColor2:"rgb(239 68 68 / 0.2)"}
])
const themeColor = ref(themeColorList.value[0].themeColor)
//获取主题色
const getThemeColor = () => {
    themeColor.value = themeColorList.value[0].themeColor
}
getThemeColor()

//改变主题色
const changeTheme = (color) => {
    themeColor.value = color
    if(process.env.NODE_ENV === 'development') console.log(themeColor.value)
    // editTheme(themeColor.value)
}
//恢复默认
const recoverDefault = () => {
    themeColor.value = themeColorList.value[0].themeColor
    // editTheme("#0064C8")
}

</script>
<style lang="scss" scoped>
.theme-setting {
    .info-container {
        h3,h4 {
            font-weight: normal;
        }
        .info-box {
            margin-top: 20px;
            .el-card{
                &:hover {
                    border-color: var(--el-color-primary);
                }
                &.active {
                    border-color: var(--el-color-primary);
                    background-color:var(--el-color-primary-light-9);
                }
            }
            .el-card__body {
                .color-box {
                    border-radius: 4px;
                    .header {
                        height: 20px;
                    }
                    .line {
                        height: 10px;
                        margin: 10px auto 0;
                        border-radius: 4px;
                        &-1{
                            width: 50%;
                        }
                        &-2 {
                            width:75%
                        }
                        &-3 {
                            width: 33.3%;
                        }
                    }
                    .line-box {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        margin-bottom: 10px;
                        .line {
                            width: 16.666667%;
                            margin:10px 2px;
                        }
                    }
                }
                p {
                    font-size: 14px;
                    margin: 10px 0;
                }
            }
        }
        h4 {
            margin-top: 20px;
            border-top: 1px solid #e4e4e4;
            padding-top: 20px;
        }
        .theme-box{
            margin-top: 10px;
            display: flex;
            align-items: center;
            .theme-color-block{
                span{
                font-size: 14px;
                }
                ::v-deep(.el-color-picker__trigger){
                    width: 85px;
                }
            }
        }
    }
}

</style>